<template>
  <view class="gesture_div">
    <view :class="['tips', errorCount != 5 ? 'errorTips' : '']">{{
      errorCount == 5
        ? "请绘制手势密码"
        : "密码错误！还可以再试" + errorCount + "次"
    }}</view>
    <view class="mgt30" style="color: red" v-show="ifShowTips">{{ text }}</view>
    <view class="mgt30">
      <mpvue-gesture-lock
        :containerWidth="590"
        :cycleRadius="70"
        @end="onEnd"
        :password="password"
      ></mpvue-gesture-lock>
    </view>
    <view class="toLoginPage" @tap="toLoginPage">
      <text class="tips">账号密码登录</text>
      <image src="@/static/image/icon/icon_right.png" class="icon" mode="" />
    </view>
  </view>
</template>

<script>
import mpvueGestureLock from "@/components/mpvueGestureLock";
import { getGetcode, getLogin } from "../../request/login";
export default {
  components: {
    mpvueGestureLock,
  },
  data() {
    return {
      ifShowTips: false, //重登提示
      password: [],
      errorCount: 5,
      text: "连续错误五次，请重新登录并设置手势",
      storageCode: "",
    };
  },
  onShow() {
    this.storageCode = uni.getStorageSync("gestureTheMarkCode");
  },
  methods: {
    toLoginPage() {
      uni.navigateTo({ url: "/pages/login/index" });
    },
    //异步存储信息
    uniSetStorageSync(keyName, keyValue) {
      uni.setStorageSync(keyName, keyValue);
    },
    onEnd(data) {
      if (this.errorCount > 1) {
        if (data) {
          if (JSON.stringify(data) == this.storageCode) {
            this.toLogin();
          } else {
            this.errorCount--;
          }
        }
      } else {
        this.ifShowTips = true;
        uni.setStorageSync("gestureTheMark", false);
        uni.setStorageSync("gestureTheMarkCode", false);
      }
    },
    toLogin() {
      uni.switchTab({
        url: "/pages/home/index",
      });
      // var name = uni.getStorageSync("userphone");
      // var pwd = uni.getStorageSync("userpwd");
      // getGetcode({
      //   phone: name,
      // }).then((res) => {
      //   if (res.data.code == 200) {
      //     var params = {
      //       phone: name,
      //       code: this.form.yzm,
      //     };
      //     getLogin(params).then((res) => {
      //       if (res.data.code == 200) {
      //         uni.switchTab({
      //           url: "/pages/home/index",
      //         });
      //       } else {
      //         this.text = "登陆失败！";
      //       }
      //     });
      //   } else {
      //     this.text = "登陆失败！";
      //   }
      // });
    },
  },
};
</script>

<style scoped lang="scss">
.gesture_div {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;

  .tips {
    font-size: 32rpx;
  }

  .errorTips {
    color: red;
  }

  .toLoginPage {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    .tips {
      color: rgb(121, 172, 248);
      margin-right: 10rpx;
    }
    .icon {
      width: 14rpx;
      height: 20rpx;
    }
  }

  .mgt30 {
    margin-top: 30rpx;
  }
}

.uni-text {
  font-size: 30upx;
  text-align: center;
  margin-top: 30upx;
}
</style>
